/**
 * 入口组件 create to by doujiabao
 */

import React, { Component } from 'react'
import { HashRouter as Router, Route, Switch } from 'react-router-dom'//, Redirect
import { connect } from 'react-redux'
import { updateUserInfo } from '@/action'

import styles from './index.module.styl'

import Cookies from 'js-cookie'
import loadable from 'react-loadable'

import routerMap from '@/router'
import {
    getIsLogin,
    isUndef,
    isMobile
} from "@/utils"

import PageLoaderLoading from '@/components/PageLoaderLoading'
import Header from './Header'
import SideMenu from './SideMenu'
import NotFound from '@/components/NotFound'
import NotMobile from '@/components/NotMobile'
import LoginComponent from '@/routes/login'

const loadableComponent = loader => (loadable({
    loader,
    loading: PageLoaderLoading,
}))

const routes = [
    //首页
    {
        path: routerMap.dashboard,
        component: loadableComponent(() => import('@/routes/dashboard')),
    },
    /**
     * 博客管理
     */
    //博客配置
    {
        path: routerMap.blogConfig,
        component: loadableComponent(() => import('@/routes/bconfig')),
    },
    //博客列表
    {
        path: routerMap.blogList,
        component: loadableComponent(() => import('@/routes/blog')),
    },
    //博客新增
    {
        path: routerMap.blogAdd,
        component: loadableComponent(() => import('@/routes/blog/add')),
    },
    /**
     * 画板管理
     */
    //画板列表
    {
        path: routerMap.drawingList,
        component: loadableComponent(() => import('@/routes/drawing')),
    },
    //抽奖转盘
    {
        path: routerMap.turntable,
        component: loadableComponent(() => import('@/routes/turntable')),
    }
]

function goLoginPage() {
    window.location.href = window.location.origin + '/#/login'
}

class Layouts extends Component {

    state = {
        isLogin: true
    }

    componentDidMount() {
        //如果不是登陆页并且没有logintoken，跳转到登录
        if (!getIsLogin() || window.location.hash === '#/login') {
            //暴露模块
            this.setState({ isLogin: true })
            //跳转登录页d
            !getIsLogin() && goLoginPage()
        } else {
            this.setState({ isLogin: false })
            //redux
            this.props.updateUserInfo(JSON.parse(Cookies.get('userInfo')))
        }
    }

    login = () => {
        this.setState({ isLogin: false })
    }

    render() {

        const {
            isLogin
        } = this.state

        return (<div className={styles.layouts}>

            {isMobile ? <NotMobile /> : <Router>

                {isLogin ? <LoginComponent login={this.login} />

                    : <React.Fragment>
                        <SideMenu />
                        <main className={styles.content}>
                            <Header />
                            <div className={styles.mainContent}>
                                <Switch>
                                    <Route path='/' exact component={loadableComponent(() => import('@/routes/dashboard'))} />
                                    {routes.map((route, idx) => (<Route
                                        key={idx}
                                        exact={isUndef(route.exact) || route.exact}
                                        path={route.path}
                                        component={route.component}
                                    />))}
                                    <Route component={NotFound} />
                                </Switch>
                            </div>
                        </main>
                    </React.Fragment>}

            </Router>}

        </div>)
    }

}

const mapDispatchToProps = dispatch => {
    return {
        updateUserInfo(data) {
            dispatch(updateUserInfo(data))
        }
    }
}

export default connect(null, mapDispatchToProps)(Layouts)